<template>
  <Modal
      v-model="visible"
      title="收藏组件"
      :mask-closable="false"
      :width="360"
      :z-index="999"
      @on-cancel="cancel">
    <Form ref="form" :label-width="80" :model="formData" :rules="ruleValidate">
      <FormItem label="id" prop="id" hidden>
        <Input v-model="formData.id"/>
      </FormItem>
      <FormItem label="所属分组" prop="group_id">
        <Select transfer v-model="formData.group_id">
          <Option v-for="item in enshrineCompGroups" :value="item.id" :key="item.id">{{ item.group_name }}</Option>
        </Select>
      </FormItem>
      <FormItem label="收藏名称" prop="enshrine_name">
        <Input v-model="formData.enshrine_name" placeholder="收藏名称"/>
      </FormItem>
      <FormItem label="备注" prop="remark">
        <Input type="textarea" :rows="3" v-model="formData.remark" />
      </FormItem>
      <!--<FormItem label="数据" prop="layout_item_obj">
        <Input v-model="formData.layout_item_obj" type="textarea"/>
      </FormItem>-->
    </Form>
    <div slot="footer">
      <Button type="default" @click="cancel">关闭</Button>
      <Button type="primary" @click="submitForm">保存</Button>
    </div>
  </Modal>
</template>

<script>
  export default {
    name: 'EnshrineCompFormModal',
    props: {
      show: Boolean
    },
    data() {
      return {
        visible: this.show,
        formData: {
          id: '',
          group_id: '',
          type: '',
          thumbnail_uri: '',
          enshrine_name: '',
          remark: '',
          layout_item_obj: '',
          component_name: '',
          user_id: '',
          create_date: ''
        },
        ruleValidate: {
          group_id: [
            { required: true, message: '所属分组不能为空', trigger: 'blur' }
          ],
          enshrine_name: [
            { required: true, message: '收藏名不能为空', trigger: 'blur' }
          ],
        },
        enshrineCompGroups: []
      }
    },
    mounted() {

    },
    methods: {

      loadAllEnshrineCompGroups () {
        this.$PnApi.EnshrineCompApi.getAllEnshrineCompGroups().then(result => {
          this.enshrineCompGroups = result.data.payload
        })
      },

      submitForm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$PnApi.EnshrineCompApi.saveEnshrineComp(this.formData).then(result => {
              if (result.data.success) {
                this.$refs.form.resetFields();
                this.cancel();
                this.$Message.success(result.data.payload);
                this.$EventBus.$emit('pn_saveEnshrineSuccess')
              }
            })
          }
        });
      },

      cancel () {
        this.visible = false;
        this.$emit('cancel', this.visible);
        this.$refs.form.resetFields();
      },
    },
    computed: {},
    watch: {
      show (val) {
        this.visible = val
        if (val) {
          $(document).unbind('keydown');
          $(document).unbind('keyup');
          this.loadAllEnshrineCompGroups()
        }
      }
    }
  }
</script>

<style scoped>

</style>
